{% load i18n %}
<nav class="flex w-full flex-wrap items-center justify-between" role="navigation" aria-label="pagination">
    <div class="w-full md:w-auto mb-2">
        {% if page.has_previous %}
        <a href="?page={{ page.previous_page_number }}&{{url_parameters}}" class="button field !low bg-neutral-000 w-auto mr-1">{% trans 'Previous' %}</a>
        {% else %}
        <a class="button field !low bg-neutral-000 w-auto mr-1" disabled>{% trans 'Previous' %}</a>
        {% endif %}
        {% if page.has_next %}
        <a href="?page={{ page.next_page_number }}&{{url_parameters}}" class="button field !low bg-neutral-000 w-auto">{% trans 'Next' %}</a>
        {% else %}
        <a class="button field !low bg-neutral-000 w-auto" disabled>{% trans 'Next' %}</a>
        {% endif %}
    </div>

    <ul class="pagination-list w-full md:w-auto mb-2 flex">
        {% for pnum in begin %}
        {% if page.number == pnum %}
        <li><a class="button field !low w-auto mx-1 text-white bg-neutral-700">{{ pnum }}</a></li>
        {% else %}
        <li><a class="button field !low bg-neutral-000 w-auto mx-1" href="?page={{ pnum }}&{{url_parameters}}">{{ pnum }}</a></li>
        {% endif %}
        {% endfor %}

        {% if middle %}
        <li><span class="pagination-ellipsis">&hellip;</span></li>
        {% for pnum in middle %}
        {% if page.number == pnum %}
        <li><a class="button field !low w-auto mx-1 text-white bg-neutral-700">{{ pnum }}</a></li>
        {% else %}
        <li><a class="button field !low bg-neutral-000 w-auto mx-1" href="?page={{ pnum }}&{{url_parameters}}">{{ pnum }}</a></li>
        {% endif %}
        {% endfor %}
        {% endif %}

        {% if end %}
        <li><span class="pagination-ellipsis">&hellip;</span></li>
        {% for pnum in end %}
        {% if page.number == pnum %}
        <li><a class="button field !low w-auto mx-1 text-white bg-neutral-700">{{ pnum }}</a></li>
        {% else %}
        <li><a class="button field !low bg-neutral-000 w-auto mx-1" href="?page={{ pnum }}&{{url_parameters}}">{{ pnum }}</a></li>
        {% endif %}
        {% endfor %}
        {% endif %}
    </ul>
</nav>